<!-- 确认领取页 -->
<template>
	<view class="confirmreceive">
		<view class="item">
			<text>卡包名称</text>
			<text>{{name}}</text>
		</view>
		<view class="item">
			<text>使用场景</text>
			<text>{{scene_label}}</text>
		</view>
		<view class="item">
			<text>商户名称</text>
			<text>{{business_name}}</text>
		</view>
		<view class="item-2">
			<view class="item-box">
				<text>商户位置</text>
				<view class="text-tit">
					<text>{{city}}{{area}}</text>
					<image src="../../../static/images/dinwei.png" mode="aspectFit"></image>
				</view>
			</view>
			<p class="wz-p">{{address}}</p>
		</view>
		<view class="item">
			<text>商户领取限额</text>
			<text>{{company_num}}</text>
		</view>
		<view class="item">
			<text>个人领取限额</text>
			<text>{{person_num}}</text>
		</view>
		<view class="item">
			<text>使用时间</text>
			<text>{{start_time}}-{{end_time}}</text>
		</view>
		<view class="item">
			<text>商家电话</text>
			<text @tap="phoneCall">{{link_mobile}}</text>
		</view>
		<view class="sygz-box">
			<text>使用说明</text>
			<view class="item-tit">
				<p>{{rule}}</p>
			</view>
		</view>
		<view class="f-box">
			<p>支付方式</p>
			<view class="wx-box">
				<view class="wx">
					<image src="../../../static/images/weixin.png" mode="aspectFit"></image>
					<text>微信支付</text>	
				</view>
				<u-checkbox-group>
					<u-checkbox @change="wx" v-model="checked1" shape="circle" active-color="#EC5F2F"></u-checkbox>
				</u-checkbox-group>
			</view>
			<!-- <view class="wx-box">
				<view class="wx">
					<image src="../../../static/images/zhifubao.png" mode="aspectFit"></image>
					<text>支付宝</text>
				</view>
				<u-checkbox-group>
					<u-checkbox @change="zfb" v-model="checked2" shape="circle" active-color="#EC5F2F"></u-checkbox>
				</u-checkbox-group>
			</view> -->
		</view>
		<view class="footer">
			<view class="top">
				<text>购买数量</text>
				<u-number-box v-model="value" @change="valChange"></u-number-box>
			</view>
			<view class="bottom">
				<view class="left">
					<text>¥0.00</text>
					<text>¥99</text>
				</view>
				<button @click="getreceivesuccess">免费领取</button>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {shareMixins} from '../../../mixins/share.js'
	export default {
		mixins:[shareMixins],
		data() {
			return {
				shareData: {
				    title: '空港卡券联盟商户端',
				    path: '/pages/mine/mine' // 分享的页面路径
				},
				checked1:true,
				checked2:false,
				value:'',
				name:'',
				start_time:'',
				end_time:'',
				price:'',
				city:'',
				area:'',
				address:'',
				person_num:'',
				link_mobile:'',
				rule:'',
				scene_label:'',
				business_name:'',
				receive_num:'',
				id:'',
				xlNum:'',
				company_num:'',
				person_num:''
			}
		},
		onLoad() {
			this.lqkqDetails = uni.getStorageSync('lqkqDetails')
			// console.log(this.lqkqDetails)
			this.name = this.lqkqDetails.name
			this.scene_label = this.lqkqDetails.scene_label
			this.business_name = this.lqkqDetails.business_name
			this.city = this.lqkqDetails.city
			this.area = this.lqkqDetails.area
			this.address = this.lqkqDetails.address
			var start_time = this.lqkqDetails.start_time
			var end_time = this.lqkqDetails.end_time
			this.start_time = (new Date(parseInt(start_time) * 1000).toLocaleString().substr(0,9))
			this.end_time = (new Date(parseInt(end_time) * 1000).toLocaleString().substr(0,9)) 
			this.link_mobile = this.lqkqDetails.link_mobile
			this.rule = this.lqkqDetails.rule
			this.receive_num = this.lqkqDetails.company_num
			this.id = this.lqkqDetails.id
			this.company_num = this.lqkqDetails.company_num
			this.person_num = this.lqkqDetails.person_num
		},
		methods: {
			wx(e){
				this.checked1 = e.value
				this.checked2 = false
				console.log(this.checked1)
			},
			zfb(e){
				this.checked2 = e.value
				this.checked1 = false
				console.log(this.checked2);
			},
			valChange(e) {//步进器值
				this.xlNum = e.value
				if(e.value <= this.company_num){
					
				}else{
					this.$refs.uToast.show({
						title:'不能大于商家限额',
						type:'warning'
					})
				}
			},
			async getreceivesuccess(){//领取方法
				var data = {
					id:this.id,
					receive_num:this.xlNum
				}
				const res = await this.$myRequest({
					url:'/api/businessCoupon/receiveCoupon'+this.$u.queryParams(data),
					method:'POST'
				}).then((res)=>{
					// console.log(res.data.code)
					if(res.data.code == 200){
						console.log(11)
						uni.navigateTo({
							url:'../receivesuccess/receivesuccess'
						})
					}else{
						this.$refs.uToast.show({
							title:res.data.msg,
							type:'error'
						})
					}
				})
				
			},
			phoneCall(){//拨打电话
				var _this = this
				uni.makePhoneCall({
				    phoneNumber: _this.link_mobile 
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.confirmreceive{
		// padding: 0 32rpx;
		background-color: #FFFFFF;
		.item{
			padding: 30rpx 32rpx;
			border-bottom: 2rpx solid #F6F6F7;
			display: flex;
			align-items: center;
			justify-content: space-between;
			text{
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
			}
			text:nth-child(2){
				font-size: 32rpx;
				color: #3C3C3C;
				font-weight: 200;
			}
		}
		.item-2{
			padding: 30rpx 32rpx;
			border-bottom: 2rpx solid #F6F6F7;
			.item-box{
				display: flex;
				align-items: center;
				justify-content: space-between;
				text{
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
				}
				.text-tit{
					display: flex;
					align-items: center;
					text{
						font-weight: 200;
						font-size: 32rpx;
						color: #3C3C3C;
						margin-right: 30rpx;
					}
					image{
						width: 19rpx;
						height: 27rpx;
					}
				}
			}
			.wz-p{
				text-align: right;
				margin-top: 32rpx;
				font-size: 32rpx;
				color: #3C3C3C;
				font-weight: 200;
			}
		}
		.sygz-box{
			margin-top: 68rpx;
			border-bottom: 2rpx solid #F6F6F7;
			padding-bottom: 30rpx;
			padding-left: 32rpx;
			padding-right: 20rpx;
			text{
				font-size: 32rpx;
				color: #3C3C3C;
				font-weight: bold;
			}
			.item-tit{
				margin-top: 20rpx;
				line-height: 40rpx;
				p{
					font-size: 28rpx;
					font-weight: 200;
					color: #3C3C3C;
				}
			}
		}
		.f-box{
			padding-top: 36rpx;
			padding-bottom: 114rpx;
			padding-left: 32rpx;
			padding-bottom: 300rpx;
			p{
				font-size: 32rpx;
				color: #3C3C3C;
				font-weight: bold;
			}
			.wx-box{
				margin-top: 34rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.wx{
					display: flex;
					align-items: center;
					image{
						width: 44rpx;
						height: 36rpx;
						margin-right: 8rpx;
					}
					text{
						font-size: 32rpx;
						color: #333333;
					}
				}
			}
		}
		.footer{
			position: fixed;
			bottom: 0;
			width: 100%;
			background-color: #FFFFFF;
			height: 243rpx;
			border-top: 2rpx solid #F9F5F2;
			padding: 16rpx 30rpx 88rpx 30rpx;
			.top{
				display: flex;
				align-items: center;
				justify-content: space-between;
				text{
					font-size: 32rpx;
					font-weight: bold;
					color: #333333;
				}
			}
			.bottom{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 22rpx;
				.left{
					text{
						font-size: 34rpx;
						color: #EC5F2F;
						font-weight: bold;
					}
					text:nth-child(2){
						font-size: 28rpx;
						color: #8B8B8B;
						font-weight: bold;
						margin-left: 20rpx;
						text-decoration: line-through;
					}
				}
				button{
					width: 230rpx;
					height: 72rpx;
					margin: 0;
					padding: 0;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #FFFFFF;
					font-size: 40rpx;
					background: linear-gradient(#FFB487,#EC5F2F);
					border-radius: 36rpx;
				}
			}
		}
	}
	
</style>
